<script setup>
import { ref, onMounted } from 'vue';
import { Home } from '@/api'
onMounted(()=>{
    load_header();
});
let head = ref([]);
let load_header = async () => {
    let { status, msg, data } = await Home.header();
    head.value = {...data.info};
    sessionStorage.usable=1;
}
let s = async () => {
    let { status: sm, msg: mm, data: dm } = await Home.menus();
    console.log('menus', sm, mm, dm);
    let { status: sml, msg: mml, data: dml } = await Home.menusList();
    console.log('menusList', sml, mml, dml);
    let { status: sl, msg: ml, data: dl } = await Home.logo();
    console.log('logo', sl, ml, dl);
    let { status: sj, msg: mj, data: dj } = await Home.jnotice();
    console.log('jnotice', sj, mj, dj);
    let { status: sh, msg: mh, data: dh } = await Home.header();
    console.log('header', sh, mh, dh);
    let { status: so, msg: mo, data: dor } = await Home.order();
    console.log('order', so, mo, dor);
    let { status: su, msg: mu, data: du } = await Home.user();
    console.log('user', su, mu, du);
    let { status, msg, data } = await Home.rank();
    console.log('rank', status, msg, data);
}
// s();
</script>
<template>
    <div class="fl">
        <el-card class="box-card" v-for="item in head">
            <template #header>
                <div class="card-header spaceb">
                    <span>{{item.title}}</span>
                    <el-tag>{{item.date}}</el-tag>
                </div>
            </template>
            <el-statistic :value="item.today">
            </el-statistic>
            <div class="statistic-footer card-border">
                <div class="footer-item">
                    <span>昨日比{{item.yesterday}}</span>
                    <span class="green">
                        日环比{{item.today_ratio}}%
                        <el-icon>
                            <CaretTop />
                        </el-icon>
                    </span>
                </div>
            </div>
            <div style="padding-top: 10px;" class="spaceb">
                <span>{{ item.total_name }}</span>
                <span>{{ item.total }}</span>
            </div>
        </el-card>
    </div>
    <div class="fl">
        <el-card class="tag-card" shadow="hover">
            <el-icon :size="50">
                <UserFilled />
            </el-icon>
            <div>用户管理</div>
        </el-card>
        <el-card class="tag-card" shadow="hover">
            <el-icon :size="50">
                <Tools />
            </el-icon>
            <div>系统设置</div>
        </el-card>
        <el-card class="tag-card" shadow="hover">
            <el-icon :size="50">
                <ShoppingCart />
            </el-icon>
            <div>商品</div>
        </el-card>
        <el-card class="tag-card" shadow="hover">
            <el-icon :size="50">
                <Memo />
            </el-icon>
            <div>订单管理</div>
        </el-card>
        <el-card class="tag-card" shadow="hover">
            <el-icon :size="50">
                <Message />
            </el-icon>
            <div>短信配置</div>
        </el-card>
        <el-card class="tag-card" shadow="hover">
            <el-icon :size="50">
                <MessageBox />
            </el-icon>
            <div>文章管理</div>
        </el-card>
        <el-card class="tag-card" shadow="hover">
            <el-icon :size="50">
                <Discount />
            </el-icon>
            <div>分销管理</div>
        </el-card>
        <el-card class="tag-card" shadow="hover">
            <el-icon :size="50">
                <Ticket />
            </el-icon>
            <div>优惠券</div>
        </el-card>
    </div>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>订单</span>
            </div>
        </template>
        <div>订单量趋势</div>
        <div class="fl">
            <div>金额</div>
            <div>数量</div>
        </div>
    </el-card>
</template>

<style lang="less" scoped>
.fl {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;

    .box-card {
        width: 23%;
    }
}

.spaceb{
    display: flex;
    justify-content: space-between;
}
.card-border{
    padding-bottom:20px ;
    border-bottom: 1px dashed black ;
} 
.tag-card {
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>